<template>
  <div class="good-panel">
    <search-header title="选择商品" enable-search @search="handleSearch"></search-header>
    <el-tabs style="margin-top: 10px;" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="洗衣" name="0"></el-tab-pane>
      <el-tab-pane label="洗鞋" name="1"></el-tab-pane>
      <el-tab-pane label="包类" name="2"></el-tab-pane>
      <el-tab-pane label="家纺" name="3"></el-tab-pane>
      <el-tab-pane label="奢侈品维护" name="4"></el-tab-pane>
      <el-tab-pane label="高端家纺维护" name="5"></el-tab-pane>
    </el-tabs>
    <div class="good-panel__type">
      <el-button @click="handleClickType(type)" size="small" :type="defaultType === type.type ? 'primary': 'default'" v-for="(type, idx) in types" :key="idx">{{type.name}}</el-button>
    </div>
    <el-table :data="data" style="width: 100%; margin-top: 10px;">
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="washType" label="洗衣类型"></el-table-column>
      <el-table-column prop="count" label="数量"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">任意操作</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import SearchHeader from '@/components/SearchHeader';

export default {
  components: {
    SearchHeader
  },
  data() {
    return {
      data: [],
      activeName: '0',
      defaultType: 0,
      types: [
        { type: 0, name: '洗衣1' },
        { type: 1, name: '洗衣1' },
        { type: 3, name: '洗衣1' },
        { type: 4, name: '洗衣1' },
        { type: 5, name: '洗衣1' },
        { type: 2, name: '洗衣1' },
        { type: 6, name: '洗衣1' },
        { type: 7, name: '洗衣1' },
        { type: 8, name: '洗衣1' },
        { type: 9, name: '洗衣1' },
        { type: 10, name: '洗衣1' }
      ],
      data: []
    };
  },
  methods: {
    handleSearch() {
      this.$message({
        type: 'success',
        message: '搜索成功'
      });
    },
    handleClick() {},
    handleClickType(type) {
      this.defaultType = type.type;
    }
  }
};
</script>

<style>

</style>
